<template>
	<view class="">
		<view class="note"></view>
		<view class="content" style="z-index: 10" :class="{ popupShow: show && showPopup }">
			<u-sticky offset-top="0">
				<view :class="[art == 1 ? 'tops' : '']">
					<!-- #ifdef APP -->
					<view style="height: 44px"></view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view style="height: 10px"></view>
					<!-- #endif -->
					<view class="c_top" style="" v-if="art != 1">
						<view class="flex" style="justify-content: space-between; padding: 7px 15px; width: 100%">
							<view class="flex">
								<view class="flex">
									<image style="width: 30px; height: 30px; border-radius: 50%"
										:src="imgurl + com_info.userHead" mode=""></image>
									<text class="t_title">{{ com_info.name }}</text>
								</view>
								<view class="flex" style="padding-left: 10px;">
									<image style="width: 30px; height: 30px; border-radius: 50%"
										:src="imgurl + com_info.userHead" mode=""></image>
									<text class="t_title">{{ com_info.name }}</text>
								</view>
							</view>
							<view @click="messages" class="" style="position: relative">
								<!-- <u-icon name="bell" size="26"></u-icon> -->
								<image style="width: 26px;height: 26px;" src="/static/font/4.png" mode=""></image>
								<text v-if="index_info.allmark > 0" style="
										display: block;
										position: absolute;
										right: -5px;
										top: -5px;
										background: #f00;
										border-radius: 50%;
										font-size: 10px;
										font-weight: 400;
										color: #ffffff;
										width: 18px;
										height: 18px;
										text-align: center;
										line-height: 18px;
									">
									{{ index_info.allmark }}
								</text>
								<!-- <u-badge style="position: absolute;right: -10px;top: -10px;" bgColor='#f00' :type="type"
									max="999999" :value="index_info.allmark"></u-badge> -->
							</view>
						</view>
					</view>
					<view class="c_top" style="height: 44px;justify-content: center;" v-if="art == 1">
						<view class="" style="text-align: center;  font-size: 16px;    font-weight: bold;    color: #fff;    line-height: 44px;">
									首页
						</view>
					</view>
				</view>
			</u-sticky>


			<view class="marto ">
				<view class="" style="position: relative">
					<u-tabs lineWidth="0" lineColor="#FF3331" :activeStyle="{
							color:'#fff',
							transform: 'scale(1.05)',
							fontSize: '16px',
							fontWeight: 'bold',
							width: '100%',
							height: '44px',	
							display: 'flex',
							alignItems: 'center',
							justifyContent: 'center',
							padding: '0 !important',
						}" :inactiveStyle="{
							color: '#fff',
							fontSize: '16px',
							fontWeight: 'bold',
						}" :current="current" @change="change_tabs" :itemStyle="item" :list="list" @click="sectionChange"
						:scrollable="false"></u-tabs>
				</view>
				<view class="bg-color" style="padding: 15px 10px; border-radius:6px;">
					<view v-if="sets != 2">
						<view class="flex cont" style="justify-content: space-between; margin-bottom: 15px"
							v-for="(item, index) in collective" :key="index">
							<view @click="msg_d(item)" class="flex" style="width: 73%">
								<text class="ydd" v-if="item.is_read == 1">已读</text>
								<text class="ydd"
									style="background: linear-gradient(-87deg, #F09179, #EF884A); color: #ffffff"
									v-if="item.is_read == 0">未读</text>
								<text class="btt" style="width: 80%" v-html="item.title"></text>
							</view>
							<text class="b_time"
								style="width: 25%; font-size: 14px; color: #787a7a">{{ item.createtime }}</text>
						</view>
						<view class="flex cont" style="justify-content: center">
							<view @click="more" class=""
								style="font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; color: #878989">
								查看更多
							</view>
						</view>
					</view>
					<view style="font-size: 14px; color: #1d1f20" v-else>
						<view class="alin" v-html="jsjl"></view>
					</view>
				</view>
				<view class="marto bg-color" style="margin: 15px auto 0;border-radius: 6px;width: 100%;">
					<view class="flex" style="padding: 15px 20px;justify-content: space-between;">
						<view @click="follow" class="flex" style="width: 49%;">
							<view class="flex"
								style="flex-direction: column;align-items: flex-start;padding-right: 12px;">
								<text style="font-size: 14px;font-weight: bold;color: #000000;">人工客服</text>
								<text
									style="font-size: 11px;font-weight: 400;color: #666666;padding-top: 10px;">全天为你服务</text>
							</view>
							<image style="width: 49px;height: 49px;" src="/static/font/3.png" mode=""></image>
						</view>
						<view class="" style="width: 1px;height: 26px;background: rgba(174,183,197,0.72);">

						</view>
						<view @click="novice" class="flex" style="width: 49%;justify-content: flex-end;">
							<view class="flex"
								style="flex-direction: column;align-items: flex-start;padding-right: 12px;">
								<text style="font-size: 14px;font-weight: bold;color: #000000;">新手指引</text>
								<text
									style="font-size: 11px;font-weight: 400;color: #666666;padding-top: 10px;">玩转荣耀地推</text>
							</view>
							<image style="width: 44px;height: 49px;" src="/static/font/2.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="marto pad15" style="width: 100%;">
					<u-swiper :list="list1" @click="click" height="150" :circular="true"></u-swiper>
				</view>
				<view class="">
					<view class="flex" style="flex-wrap: wrap">
						<view @click="btn(it, i)" :class="category == it.id ? 'biu bius' : 'biu'"
							v-for="(it, i) in cate_list" :key="i">
							{{ it.title }}
						</view>
					</view>
					<view style="margin-bottom: 50px">
						<view v-for="(it, i) in listdata" :key="i" @click="detail(it)"
							style="padding: 15px; background-color: #fff; border-radius: 10px; margin-top: 15px">
							<view class="flex"
								style="justify-content: space-between; border-radius: 10px;border-bottom: 1px solid #ececec;">
								<view class="flex" style="width: 100%;padding-bottom: 15px;">
									<image style="width: 50px; border-radius: 10px; height: 50px"
										:src="imgurl + it.logo_image" mode=""></image>
									<view class="flex"
										style="margin-left: 10px;justify-content: space-between;flex: 1;">
										<view style="font-size: 16px; font-weight: 400; color: #1d1f20">{{ it.title }}
										</view>
										<view v-if="userinfo.pid == 0" style="position: relative">
											<u-icon @click.native.stop="btn_flag(it.id)" name="question-circle"
												color="#000" size="18"></u-icon>
											<view v-show="tipsItem == it.id" class="tips">{{ com_info.settlementTips }}
											</view>
										</view>

									</view>
								</view>

							</view>
							<view
								style="padding: 17px 15px 17px 15px;  border-radius: 5px;border-bottom: 1px solid #ececec;">
								<view class="flex" style="margin-bottom: 10px; justify-content: space-between">
									<view style="font-size: 14px; color: #666; width: 40%; text-align: center">结算标准
									</view>
									<view
										style="font-size: 14px; color: #666; width: 30%; text-align: center; padding-left: 20px">
										结算价
									</view>
									<view v-if="level == 'A'"
										style="font-size: 14px; color: #666; width: 30%; text-align: center">
										补贴价
									</view>
								</view>
								<view v-if="level == 'A'" class="flex"
									style="margin-bottom: 10px; justify-content: space-between"
									v-for="(j, k) in it.grouplist" :key="k">
									<view style="font-size: 14px; color: #1d1f20; width: 40%; text-align: center">
										{{ j.name }}
									</view>
									<view style="
											font-size: 14px;
											color: #E7643B;
											font-weight: 400;
											width: 30%;
											text-align: center;
											padding-left: 20px;
										">
										{{ j.max_price }}
									</view>
									<view
										style="font-size: 14px; color: #E7643B; font-weight: 400; width: 30%; text-align: center">
										{{ j.sub_price }}
									</view>
									<!-- <view v-if="userinfo.pid == 0" style="width: 18px"></view> -->
								</view>
								<view v-if="level == 'B'" class="flex"
									style="margin-bottom: 10px; justify-content: space-between"
									v-for="(j, k) in it.agentprice" :key="k">
									<view style="font-size: 14px; color: #1d1f20; width: 40%; text-align: center">
										{{ j.name }}
									</view>
									<view style="
											font-size: 14px;
											color: #E7643B;
											font-weight: 400;
											width: 30%;
											text-align: center;
											padding-left: 20px;
										">
										{{ j.price }}
									</view>
									<!-- <view v-if="userinfo.pid == 0" style="width: 18px"></view> -->
									<!-- <view
										style="font-size: 14px;color: #FF3331;font-weight: 400;width: 33.33%;text-align: center;">
										{{j.sub_price}}
									</view> -->
								</view>
							</view>
							<view class="flex" style="justify-content: space-between;padding-top: 15px;">
								<view class="">
									<view class="flex" style="margin-top: 6px">
										<view v-for="(its, ir) in it.label" :key="ir" style="
												padding: 0px 5px;
												background-color: #FEFAF9;
												color: #E7643B;
												border-radius: 5px;
												margin-right: 10px;
											">
											{{ its }}
										</view>
									</view>
								</view>
								<view v-if="it.project_status == 1" style="
										padding: 5px 11px;
										background: linear-gradient(152deg, #5A8FF5, #4A61F6);
										box-shadow: 0px 6px 9px 0px rgba(79,120,234,0.52);
										border-radius: 14px;
										font-size: 12px;
										color: #fff;
									">
									申请推广
								</view>
								<view v-if="it.project_status == 2" style="
										padding: 5px 11px;
										background-color: #777879;
										border-radius: 14px;
										font-size: 12px;
										color: #fff;
									">
									项目暂停
								</view>
								<view v-if="it.project_status == 3" style="
										padding: 5px 11px;
										background-color: #3176ff;
										border-radius: 14px;
										font-size: 12px;
										color: #fff;
									">
									人数已满
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="position: fixed;bottom: 7%;left: 50%;transform: translateX(-50%);z-index: -1;">
				<image style="width: 73px;" :src="imgurl + com_info.logo" mode="widthFix"></image>
			</view> -->
		</view>
		<!-- <view style="position: fixed; right: 0; margin-right: 15px; z-index: 30" :style="{ top: sidetop + 'px' }">
			<view @click="follow" class="flex" style="justify-content: flex-end">
				<view class="flex" style="
						width: 40px;
						height: 40px;
						background-color: #fff;
						border-radius: 7px;
						justify-content: center;
						box-shadow: 0px 0px 3px 1px #e3e9ec;
					">
					<image style="width: 27px" src="/static/img/20.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="flex" @click="novice" style="
					background-color: #fff;
					border-radius: 7px;
					justify-content: center;
					padding: 4px 2px;
					flex-direction: column;
					box-shadow: 0px 0px 3px 1px #e3e9ec;
					margin-top: 10px;
				">
				<image style="width: 26px" src="/static/img/21.png" mode="widthFix"></image>
				<image style="width: 36px" src="/static/img/74.png" mode="widthFix"></image>
			</view>
		</view> -->
		<!-- 重要通知 -->
		<u-popup :show="show && showPopup" :round="10" mode="center" @close="show = false">
			<view style="background-color: #f7f9fa; border-radius: 10px">
				<view class="vote"></view>
				<view
					style="position: relative; min-width: 290px; max-width: 300px; padding: 67px 15px 15px; z-index: 10">
					<image style="
							position: absolute;
							top: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 137px;
							margin-top: -48px;
							z-index: 1500;
						" src="/static/img/22.png" mode="widthFix"></image>
					<view
						style="text-align: center; font-size: 20px; font-weight: bold; color: #ff3331; margin-bottom: 15px">
						重要通知
					</view>
					<scroll-view scroll-y="true" class="scroll-Y" :style="{ maxHeight: '700rpx', minHeight: '300rpx' }">
						<view style="padding: 15px; border-radius: 10px; background-color: #fff; margin-bottom: 5px"
							v-for="(it, i) in popu_list" :key="i">
							<view class="flex" style="">
								<image style="width: 16px; margin-right: 10px" src="/static/img/13.png" mode="widthFix">
								</image>
								<view>
									<text
										style="font-size: 16px; font-weight: bold; color: #1d1f20">{{ it.title }}</text>
									<!-- <text style="font-size: 16px;font-weight: 400;color: #1D1F20;">-5月20日结算须知</text> -->
								</view>
							</view>
							<view style="font-size: 12px; margin: 5px 0px 10px; color: #8e9090">{{ it.send_time }}
							</view>
							<view class="coon"
								style="font-size: 14px; color: #1d1f20; font-weight: 400; line-height: 18px">
								<u-parse :content="it.introduction" :selectable="true"></u-parse>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="close-btn" style="
						position: absolute;
						bottom: 0;
						margin-bottom: -60px;
						left: 50%;
						transform: translateX(-50%);
						display: flex;
						gap: 10px;
					">
					<view @click="noReminder" class="flex" style="
							width: 146px;
							height: 40px;
							font-size: 14px;
							color: #ffffff;
							justify-content: center;
							background-color: #ff3331;
							border-radius: 20px;
						">
						不再提醒
					</view>
					<view @click="zhixiao" class="flex" style="
							width: 146px;
							height: 40px;
							font-size: 14px;
							color: #ffffff;
							justify-content: center;
							background-color: #ff3331;
							border-radius: 20px;
						">
						我已知晓
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/common/config/index.js';
	export default {
		data() {
			return {
				type: 'primary',
				sets: 0,
				show: false,
				showPopup: false,
				currents: 0,
				title: 'Hello',
				list1: [],
				list: [{
						name: '重要通知',
						badge: {
							value: '',
						},
					},
					{
						name: '个人消息',
						badge: {
							value: '',
						},
						disabled: true,
					},
					{
						name: '结算记录',
					},
				],
				current: 0,
				item: {
					// background: '#FFF4F4',
					fontSize: '16px',
					fontWeight: '400',
					lineHeight: '20px',
					height: '44px',
				},
				popu_list: [],
				index_info: '',
				jsjl: '',
				collective: [],
				imgurl: config.imgurl,
				listdata: [],
				category: '',
				cate_list: [],
				level: '',
				com_info: '',
				lin_list: [],
				art: 0,
				tipsItem: -1,
				userinfo: null,
				sidetop: 0,
			};
		},
		onShow() {
			// #ifdef APP
			this.sidetop = 88;
			// #endif
			// #ifdef H5
			this.sidetop = 54;
			// #endif
			this.sidetop += 325;
			let wh = uni.getWindowInfo().windowHeight;
			if (this.sidetop > wh) {
				this.sidetop = wh / 2;
			}

			if (this.show) {
				this.showPopup = true;
			}
			this.tipsItem = -1;
			this.indexshow();
			this.list1 = [];
			this.ProjectList();
			this.carousel();
			this.my_msg();
		},
		onPageScroll(e) {
			if (e.scrollTop >= 44) {
				this.art = 1;
			} else {
				this.art = 0;
			}
		},
		onLoad() {
			this.common();
			this.my_msg();
			// this.ProjectList()
			// this.carousel()
			// this.indexshow()
		},
		methods: {
			async common() {
				let res = await this.$http.index.index();
				if (res.code == 1) {
					this.com_info = res.data;
				}
			},
			async my_msg() {
				let res = await this.$http.index.my_index({});
				if (res.code == 1) {
					this.userinfo = res.data.userinfo;
				}
			},
			async noReminder() {
				let res = await this.$http.index.indexShow({
					close: 1,
				});
				if (res.code == 1) {
					this.show = false;
				}
			},
			zhixiao() {
				this.showPopup = false;
			},
			async indexshow() {
				let res = await this.$http.index.indexShow();
				if (res.code == 1) {
					this.index_info = res.data;
					this.list[0].badge.value = res.data.cmark;
					this.list[1].badge.value = res.data.smark;
					this.jsjl = res.data.data.settlementLog;
					this.collective = res.data.data.collective;
					this.popu_list = res.data.popupList;
					if (res.data.popup == '1') {
						this.show = true;
						this.showPopup = true;
					}
				}
			},
			async carousel() {
				let res = await this.$http.index.carousel();
				if (res.code == 1) {
					this.lin_list = res.data;
					for (let i = 0; i < res.data.length; i++) {
						this.list1.push(this.imgurl + res.data[i].image_url);
					}
				}
			},
			async ProjectList() {
				let res = await this.$http.index.indexProjectList({
					category: this.category,
				});
				if (res.code == 1) {
					this.level = res.data.level;
					this.cate_list = res.data.categoryList;
					let a = {
						title: '全部',
						id: 0,
					};
					this.cate_list.unshift(a);
					this.listdata = res.data.project;
				}
			},
			msg_d(e) {
				uni.navigateTo({
					url: '/pages/home/detail?id=' + e.notice_id + '&type=notice',
				});
			},
			messages() {
				uni.navigateTo({
					url: '/pages/home/my_project?type=0',
				});
			},
			message() {
				uni.navigateTo({
					url: '/pages/home/my_project?type=1',
				});
			},
			//关注
			follow() {
				// #ifdef H5
				location.href = this.com_info.wxCustomerService;
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.com_info.wxCustomerService);
				// #endif
				// uni.navigateTo({
				// 	url: '/pages/home/follow'
				// })
			},
			//查看更多
			more() {
				uni.navigateTo({
					url: '/pages/home/my_project?type=0',
				});
			},
			change_tabs(e) {
				console.log(e);
			},
			sectionChange(e) {
				if (e.index == 1) {
					this.message();
				}
				this.sets = e.index;
			},
			click(e) {
				// #ifdef APP
				plus.runtime.openURL(this.lin_list[e].link);
				// #endif
				// #ifdef H5
				window.location.href = this.lin_list[e].link;
				// #endif
			},
			//新手指引
			novice() {
				uni.navigateTo({
					url: '/pages/home/novice',
				});
			},
			btn(it, i) {
				this.category = it.id;
				this.ProjectList();
			},
			detail(it) {
				uni.navigateTo({
					url: '/pages/project/detail?project_id=' + it.id,
				});
			},
			btn_flag(id) {
				if (this.tipsItem == id) {
					this.tipsItem = -1;
				} else {
					this.tipsItem = id;
				}
			},
		},
	};
</script>
<style>
	page {
		background: #f7f9fa;
	}
</style>
<style scoped lang="less">
	/deep/.u-tabs__wrapper__nav__item__text--disabled {
		color: #fff !important;
	}

	.popupShow {
		overflow: hidden;
		position: fixed !important;
		width: 100% !important;
	}

	/deep/ .u-badge {
		position: absolute;
		top: 0%;
		left: 75%;
		z-index: 100;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		position: relative;
	}

	.tops {
		// background-image: url('@/static/img/73.png');
		background-color: #203bf5;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 10000;
		width: 100%;
	}

	/deep/ .u-sticky {
		top: 0 !important;
		width: 100%;
	}

	.vote {
		background-image: url('@/static/img/6.png');
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		// overflow: hidden;
		border-radius: 10px;
		width: 330px;
		// height: 100%;
	}

	.bius {
		background-color: #314EF5 !important;
		color: #fff !important;
	}

	.biu {
		color: #1d1f20;
		padding: 5px 0px;
		background-color: #fff;
		border-radius: 10px;
		margin-right: 10px;
		margin-top: 15px;
		width: calc((100% - 40px) / 5);
		text-align: center;
		font-size: 16px;

		&:nth-child(5n) {
			margin-right: 0px !important;
		}
	}

	.content {
		position: relative;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
	}

	.c_top {
		height: 44px;
		// padding: 7px 15px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.note {
		background-image: url('@/static/font/1.png');
		background-size: 100%;
		background-repeat: no-repeat;
		width: 100%;
		position: fixed;
		height: 100%;
		z-index: 0;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.t_title {
		font-size: 16px;
		font-weight: 600;
		color: #040e21;
		line-height: 20px;
		padding-left: 15px;
	}

	.marto {
		width: 92%;
		margin: 0 auto;
	}

	.pad15 {
		padding-top: 15px;
	}

	.bg-color {
		background: #ffffff;
	}

	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 !important;
	}

	/deep/.u-tabs__wrapper__nav__item.u-tabs__wrapper__nav__item-2 {
		border-radius: 10px 10px 0 0;
	}

	/deep/.u-tabs__wrapper__nav__item.u-tabs__wrapper__nav__item-1 {
		border-radius: 0 0 10px 10px;
	}

	/deep/.u-tabs__wrapper__nav__item.u-tabs__wrapper__nav__item-0 {
		border-radius: 10px 0 0 0;
	}

	/deep/ .u-tabs__wrapper__nav__item-0 {
		border-radius: 10px 0 0 0 !important;
	}

	.yddan {
		background: #EBEDF2;
		font-size: 12px;
		font-weight: 400;
		color: #ffffff;
		line-height: 20px;
		border-radius: 6px;
		padding: 1px 6px;
	}

	.ydd {
		background: #e8e8e8;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		line-height: 20px;
		border-radius: 6px;
		padding: 1px 4px;
		// zoom: 0.9;
	}

	.btt {
		font-size: 13px;
		font-weight: 400;
		color: #333333;
		line-height: 20px;
		padding-left: 15px;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.coon {
		/deep/ span {
			word-break: break-all;
		}

		/deep/ img {
			width: 100% !important;
		}
	}

	.alin {
		/deep/ p {
			width: 100% !important;
			word-wrap: break-word;
		}
	}

	.tips {
		// background-image: url('@/static/img/49.png');
		// background-repeat: no-repeat;
		// background-size: 100% 100%;
		background-color: #2447FF;
		padding: 13px 15px 8px;
		font-size: 12px;
		color: #ffffff;
		position: absolute;
		width: 210px;
		right: 0;
		top: 20px;
		z-index: 20;
		border-radius: 10px;
	}
</style>